import React from 'react';
import { Button as AButton, Input as AInput, Divider as ADivider, InputNumber, Space } from 'antd';
import {
  LeftOutlined,
  SaveOutlined,
  EyeOutlined,
  DownloadOutlined,
  ZoomOutOutlined,
  ZoomInOutlined,
  RedoOutlined,
  ClearOutlined,
} from '@ant-design/icons';

/**
 * 顶部工具栏组件属性
 */
interface TopToolbarProps {
  /** 组态图名称 */
  graphName: string;
  /** 组态图名称变更回调 */
  onNameChange: (name: string) => void;
  /** 返回回调 */
  onBack: () => void;
  /** 保存回调 */
  onSave: () => void;
  /** 预览回调 */
  onPreview: () => void;
  /** 导出回调 */
  onExport: () => void;
  /** 放大回调 */
  onZoomIn: () => void;
  /** 缩小回调 */
  onZoomOut: () => void;
  /** 重置缩放回调 */
  onResetZoom: () => void;
  /** 清空画布回调 */
  onClearCanvas: () => void;
  /** 当前缩放比例 */
  scale: number;
  /** 画布尺寸 */
  canvasSize: { width: number; height: number };
  /** 画布尺寸变更回调 */
  onCanvasSizeChange: (size: { width: number; height: number }) => void;
}

/**
 * 顶部工具栏组件
 * 提供组态图编辑器的全局操作功能
 */
const TopToolbar: React.FC<TopToolbarProps> = ({
  graphName,
  onNameChange,
  onBack,
  onSave,
  onPreview,
  onExport,
  onZoomIn,
  onZoomOut,
  onResetZoom,
  onClearCanvas,
  scale,
  canvasSize,
  onCanvasSizeChange,
}) => {
  return (
    <div className="flex items-center justify-between p-4 border-b border-gray-200 bg-white">
      {/* Left Group */}
      <div className="flex items-center">
        <AButton type="text" icon={<LeftOutlined />} onClick={onBack}>
          返回
        </AButton>
        <ADivider type="vertical" className="h-6 mx-4" />
        <AInput
          value={graphName}
          onChange={e => onNameChange(e.target.value)}
          style={{ width: 200 }}
        />
      </div>

      {/* Center Group */}
      <div className="flex items-center space-x-4">
        <Space>
          <span className="text-sm text-gray-600">画布:</span>
          <InputNumber
            size="small"
            value={canvasSize.width}
            onChange={w => onCanvasSizeChange({ ...canvasSize, width: w || 1024 })}
            style={{ width: 180 }}
            addonBefore="W"
            min={300}
            max={2000}
          />
          <InputNumber
            size="small"
            value={canvasSize.height}
            onChange={h => onCanvasSizeChange({ ...canvasSize, height: h || 600 })}
            style={{ width: 180 }}
            addonBefore="H"
            min={300}
            max={2000}
          />
        </Space>
        <ADivider type="vertical" className="h-6" />
        <Space>
          <span className="text-sm text-gray-600">缩放:</span>
          <AButton
            size="small"
            type="text"
            onClick={onZoomOut}
            disabled={scale <= 0.1}
            icon={<ZoomOutOutlined />}
          />
          <span className="text-sm text-gray-500 w-12 text-center">{Math.round(scale * 100)}%</span>
          <AButton
            size="small"
            type="text"
            onClick={onZoomIn}
            disabled={scale >= 3}
            icon={<ZoomInOutlined />}
          />
          <AButton size="small" type="text" onClick={onResetZoom} icon={<RedoOutlined />} />
        </Space>
      </div>

      {/* Right Group */}
      <div className="flex items-center space-x-2">
        <AButton danger onClick={onClearCanvas} icon={<ClearOutlined />} title="清空画布">
          清空
        </AButton>
        <AButton type="primary" onClick={onSave} icon={<SaveOutlined />}>
          保存
        </AButton>
        <AButton onClick={onPreview} icon={<EyeOutlined />}>
          预览
        </AButton>
        <AButton onClick={onExport} icon={<DownloadOutlined />}>
          导出
        </AButton>
      </div>
    </div>
  );
};

export default TopToolbar;
